@use "theme";
@use "transition";
@use "element-plus";
@use "layout";
@use "dark";

:root {
    /* 侧边栏收起宽度 */
    --enco-sidebar-collapsed-width: 58px;

    /* 左侧菜单展开、收起动画时长 */
    --enco-transition-duration: 0.3s;

    /* 暗色模式下 hover 背景颜色 */
    --enco-dark-bg-hover: #242424;

    /* 常用 border-color, 需要时可取用 */
    --enco-border-color: rgb(5 5 5 / 6%);

    /* ========================页面高度计算======================== */

    /* 顶部导航栏高度 */
    --enco-page-head-height: 48px;

    /* 页签高度 */
    --enco-page-tag-height: 34px;

    /* 面包屑高度 (采用fix定位, 用于自身高度和内容区 padding, 不用于页面高度计算) */
    --enco-page-breadcrumb-height: 34px;

    /* 主体内容的边距 */
    --enco-page-view-margin: 20px;

    /* 页面顶部高度(header + 页签 + 面包屑) */
    --enco-page-top-height: calc(var(--enco-page-head-height) + var(--enco-page-tag-height));

    /* 页面内容区高度 (100vh减去顶部高度), 需要时可取用 */
    --enco-page-content-height: calc(100vh - var(--enco-page-top-height));

    /* 页面视图可视高度 (100vh减去头部高度和边距), 需要时可取用 */
    --enco-page-view-height: calc(var(--enco-page-content-height) - var(--enco-page-view-margin) * 2);

    /* ========================主题色============================= */

    --enco-theme-sub-menu-active-text: initial;
    --enco-theme-menu-bg: none;
    --enco-theme-menu-hover: none;
    --enco-theme-sub-menu-bg: transparent;
    --enco-theme-menu-text: initial;
    --enco-theme-sidebar-logo: none;
    --enco-theme-menu-title-hover: initial;
    --enco-theme-menu-active-before: transparent;
}

html {
    font-size: 14px;
}

/* 灰色模式 */
.html-grey {
    filter: grayscale(100%);
}

/* 色弱模式 */
.html-weakness {
    filter: invert(80%);
}

/* 关闭暗黑模式切换时的默认动画, 使用自定动画, 代码位置: src/layout/hooks/useTheme.ts */
::view-transition-new(root),
::view-transition-old(root) {
    animation: none !important;
}

/* 调整过渡到暗色模式时的层级 */
.dark::view-transition-old(root) {
    z-index: 100;
}